{% extends "base.html" %}

{% block head %}
  <script>
  var semester = 201201;
  $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
  

  var render_program_maps = function(data) {
    var ul = $("#programs-tab ul");
    if(data.error) {
      var li = $("<li>");
      li.append("Error:" + data.error);
      ul.append(li);
    } else {
      $.each(data.response, function(i, p) {
        var li = $("<li>")
        .append("[" + p.dept + "] " + p.progdesc)
        .addClass("program-map-entry")
        .data({
          type: "p",
          data: p
        });
        ul.append(li);
      });
    }
  };
  /* Renders the course selection list from JSON
   * 
   */
  var render_courses = function(data) {
    var ul = $("#courses-tab ul");
    if(data.error) {
      ul.append("<li>" + data.error + "</li>");
    } else {
      $.each(data.response, function(i, c) {
        if(c.title) {
          var li = $("<li>")
            .append(c.code + ": " + c.title)
            .addClass("course-entry")
            .data({
              type: 'c',
              data: c
            });
          ul.append(li);
        }
      });
    }
  };
  /* proceses the clicking of either
   * program map entry or course selection entry
   */
  var on_click_entry = function(e) {
    var type = $(this).data('type');
    var data = $(this).data('data');
    var ul = $("#courses");
    var li = function(c) {
      var title, code;
      title = c.title ? c.title : c.coursedesc;
      code = c.code;
      return $('<li>')
        .data('code', code)
        .append("<span class='code'>"+code+"</span>")
        .append("<span class='title'>"+title+"</span>")
        .append("<button class='remove'>x</button>");
    };
    if(type == 'c') {
      ul.append(li(data));
    } else if(type == 'p') {
      $.getJSON("{{url_for('program_map')}}",
        {semester: semester, program: data.program},
        function(data) {
          if(data.error)
            alert("Error: " + data.error);
          else
            $.each(data.response, function(i, c) {
              ul.append(li(c));
            });
        }
      );
    }
  };
  /* creates the necessary form inputs
   * and triggers the submission to
   * rescheduling page.
   */
  var do_submit = function() {
    $("#courses li").each(function(i, li) {
      var code = $(li).data('code');
      var input = $('<input>').attr({
        type: 'hidden',
        name: 'course',
        value: code
      });
      $("#send-form").append(input);
    });
    $("#send-form").trigger('submit');
  }

    
  $(document).ready(function() {
    $("#tabs").tabs();
    $.getJSON("{{url_for('program_maps')}}",
      {semester: semester}, render_program_maps);
    $.getJSON("{{url_for('courses')}}",
      {semester: semester}, render_courses);
    $("li.program-map-entry,li.course-entry").live("click", on_click_entry);
    $("#clear-selection").click(function(e) {
      $("#courses").empty();
    });
    $("#courses button.remove").live('click', function(e) {
      var li = $(this).closest("li");
      li.slideUp(300, function() {li.remove()});
    });
    $("#schedule").click(do_submit);
  });
  </script>
  {% endblock %}
  
  {% block topbar %}
  <div class="topbar-wrapper" style="z-index: 5;">
    <div class="topbar" data-dropdown="dropdown" >
      <div class="topbar-inner">
        <div class="container">
          <h3><a href="#">UOIT RE-Schedule</a></h3>
          <ul class="nav">
            <li class="active"><a href="#">Course Selection</a></li>
            <li><a href="#">Conflicts</a></li>
          </ul>
          <ul class="nav secondary-nav">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle">Dropdown</a>
              <ul class="dropdown-menu">
                <li><a href="#">Secondary link</a></li>
                <li><a href="#">Something else here</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div><!-- /topbar-inner -->
    </div><!-- /topbar -->
  </div><!-- /topbar-wrapper -->
  {% endblock %}
  <body>
    {% block body %}
      <div class="container">
        <div class="content">
          <div class="page-header">
            <h1>Scheduling <small>Select the courses you wish to schedule</small></h1>
          </div>
          <div class="span16">
            <div class="row">
              <div class="span5">
                <h2>Selected courses</h2>
                <button class="btn danger" id="clear-selection">     Clear     </button> 
                <button class="btn success" id="schedule">      Schedule      </button>
                <br/>
                <form id="send-form" method="get" 
                  action="{{url_for("page_schedule", semester=semester)}}">
                </form>
                <div class="scrolled-view">
                  <ul id="courses"></ul>
                </div>
              </div>
              <div class="span11">
                <div id="tabs">
                  <ul>
                    <li><a href="#programs-tab">Program Maps</a></li>
                    <li><a href="#courses-tab">Courses</a></li>
                  </ul>
                  
                  <div id="programs-tab">
                    <input type="text" class="span8"></input>
                    <div class="scrolled-view">
                      <ul></ul>
                    </div>
                  </div>
                  <div id="courses-tab">
                    <input type="text" class="span8"></input>
                    <div class="scrolled-view">
                      <ul></ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <footer>
          <p>&copy; December 26 2011</p>
        </footer>

      </div> <!-- /container -->
    {% endblock %}
  </body>
</html>